<script>
import dmbTable from "@/components/LTable/index.vue";
import {
  formBase,
  tableBase,
  cellStyle,
  headerCellStyle,
  tableFormStyle,
  formItemStyle,
} from "./config";
import {
  collect_fee_delAPI,
  collect_fee_importAPI,
} from "@/api/quotation/collect_fee.js";

import { mapState } from "vuex";
import dayjs from "dayjs";
import store from "@/store";
const defaultForm = {
  endTime: "",
  startTime: "",
  name: "",
  destinationId: "",
  cargoTypeId: "",
  timeEfficiencyId: "",
  shopId: "",
};

export default {
  name: "extra-long-fee",
  computed: {
    ...mapState({
      company: (state) => state.custom_dict.company,
    }),
    tableFormStyle() {
      return tableFormStyle;
    },
    cellStyle() {
      return cellStyle;
    },
    headerCellStyle() {
      return headerCellStyle;
    },
  },

  components: { dmbTable },
  data() {
    return {
      rebase: formBase,
      requestConfig: {
        url: "/base/collectFee/list",
        method: "get",
        montage: true,
      },
      set_addRequest: {
        url: "/base/collectFee/save",
        method: "post",
        montage: false,
      },
      selectionArr: [], // 多选框内容
      selfPickupPointList: [], //自提点
    };
  },

  methods: {
    tableBase() {
      return tableBase;
    },
    // 多选框内容
    selectionChange(data) {
      this.selectionArr = data;
    },
    async del(id) {
      console.log("确定要删除吗？");
      await this.$confirm("确定要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await collect_fee_delAPI(id);
      this.$refs.table.getListData();
      this.$message.success("删除成功");
    },
    // 导入
    importFile() {
      this.$refs.inputfile.click();
    },
    changeExcel(e) {
      const that = this;
      // 错误情况判断
      const files = e.target.files[0];
      console.log(files);
      if (files.length <= 0) {
        return false;
      }
      let data = new FormData();
      data.append("file", files);
      console.dir(data, 1);
      collect_fee_importAPI(data).then((res) => {
        this.$message.success("导入成功");
      });
    },
  },
};
</script>

<template>
  <div>
    <div class="mb-3 flex flex-row-reverse">
      <div>
        <el-button type="success" @click="$refs.table.getListData()"
          >查询</el-button
        >
        <el-button type="danger" @click="importFile">导入</el-button>
        <!-- 不显示 文件上传的图标 -->
        <input
          type="file"
          accept=".xls,.xlsx"
          ref="inputfile"
          @change="changeExcel"
          class="hidden"
        />
      </div>
    </div>
    <div>
      <dmb-table
        ref="table"
        :prop-list="tableBase()"
        :operateWether="true"
        :is-operate="true"
        :show-index-column="true"
        select-column-type="RADIO"
        :req-request="requestConfig"
        :set-request="set_addRequest"
        :add-request="set_addRequest"
        select-key="id"
        :cell-style="cellStyle"
        :header-cell-style="headerCellStyle"
        :initialize="false"
        :change-search-form="false"
        :show-footer="true"
        :form-item-style="tableFormStyle"
        @selectionChange="
          (row) => {
            selectionArr = row;
          }
        "
      >
        <template v-slot:operate="{ row }">
          <el-button type="danger" v-if="row.id" @click="del(row.id)"
            >删除</el-button
          >
        </template>
        <template v-slot:status="{ row }">
          <el-checkbox
            v-model="row.status"
            :true-label="1"
            :false-label="0"
          ></el-checkbox>
        </template>
      </dmb-table>
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
